<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>消息提醒</title>
    <%- include('../../_global/baseLibs') %>
    <style>
        #newsRemind li{
            position: relative;
            background-color: white;
            border-bottom: 1px solid #DCDCDC;
        }
        #newsRemind .left{
            display: flex;
            padding: 0.7rem 0 0.7rem 1.7rem;
            align-items: center;
        }
        #newsRemind .left img{
            width: 3.5rem;
            height: 3rem;
            margin-right: 1.25rem;
        }
        #newsRemind .left .textBox{
            flex: 1;
        }
        #newsRemind .left .textBox .title{
            font-size: 1.2rem;
            color: #333;

            line-height: 1.6rem;
        }
        #newsRemind .left .textBox .time-tips{
            font-size: 0.9rem;
            color: #666;
            margin-left: 0.25rem;
        }
        #newsRemind .left .textBox .time-con{
            font-size: 0.9rem;
            color: #666;
            margin-left: 0.25rem;
        }
        #newsRemind .left .textBox .content{
            font-size: 1.05rem;
            color: #959595;
            display: block;
            line-height: 1.6rem;
        }
        #newsRemind .left .unread{

            background: #ff4d4d;
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
            border-radius: 50%;
            width: 1.3rem;
            margin-right: 1rem;
        }
        #newsRemind li .rule-box{
            position: absolute;
            top: 0;
            right: -12.5rem;
            width: 12.5rem;
            height: 100%;
        }
        #newsRemind li .rule-box .text.tip{
            width: 60%;
            background: #bbb;
        }
        #newsRemind li .rule-box .text.clear{
            width: 40%;
            background: #E51C23;
        }
        #newsRemind li .rule-box .text{
            display: inline-block;
            float: left;
            color: #fff;
            height: 100%;
            line-height: 5rem;
            vertical-align: middle;
            text-align: center;
            font-size: 1.05rem;
        }
        #newsRemind .clearAll{
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            color: #333;
            font-size: 1.05rem;
        }
    </style>
</head>
<body>
<div id="newsRemind" >
    <ul>
        <li>
            <div class="left" href="咨询回复.html">
                <img src="/static/images/doctor_image.jpg" alt="">

                <div class="textBox">
                    <span class="title">咨询回复</span>
                    <span class="time-tips"><span class="date-con">上午</span><span class="time-con">6:48</span></span>
                    <span class="content">你有新的回复</span>
                </div>
                <div class="unread">1</div>
            </div>
            <div class="rule-box">
                <span class=" text tip">标为已读</span>
                <span class=" text clear">清除</span>
            </div>
        </li>
        <li>
            <div class="left" href="咨询回复.html">
                <img src="/static/images/doctor_image.jpg" alt="">

                <div class="textBox">
                    <span class="title">支付助手</span>
                    <span class="time-tips"><span class="date-con">下午</span><span class="time-con">6:48</span></span>
                    <span class="content">支付成功</span>
                </div>
                <div class="unread">1</div>
            </div>
            <div class="rule-box">
                <span class=" text tip">标为已读</span>
                <span class=" text clear">清除</span>
            </div>
        </li>
        <li>
            <div class="left" href="咨询回复.html">
                <img src="/static/images/doctor_image.jpg" alt="">

                <div class="textBox">
                    <span class="title">签约服务</span>
                    <span class="time-tips"><span class="date-con">05-10</span><span class="time-con">6:48</span></span>
                    <span class="content">2017年5月14日 完成xxx服务</span>
                </div>
                <div class="unread">1</div>
            </div>
            <div class="rule-box">
                <span class=" text tip">标为已读</span>
                <span class=" text clear">清除</span>
            </div>
        </li>
        <li>
            <div class="left" href="咨询回复.html">
                <img src="/static/images/doctor_image.jpg" alt="">

                <div class="textBox">
                    <span class="title">预约消息</span>
                    <span class="time-tips"><span class="date-con">05-09</span><span class="time-con">6:48</span></span>
                    <span class="content">［预约成功］您已预约12月20日</span>
                </div>
                <div class="unread">1</div>
            </div>
            <div class="rule-box">
                <span class=" text tip">标为已读</span>
                <span class=" text clear">清除</span>
            </div>
        </li>

    </ul>
    <a class="clearAll" href="javascript:void(0)">清空</a>
</div>


<script src="/static/js/hammer.js"></script>
<script>
    //清空
    $('.clearAll').click(function(){
        //页面层
        layer.open({
            title: [
                '提示',
                'background-color:#fff; color:#333;'
            ]
            ,anim: 'up'
            ,content: '您是否要清空所有消息记录？'
            ,btn: ['确认', '取消'],
            yes: function(index){
                $('.message-list-box').html('');
                layer.close(index)
            }
        });

    })


    var el=document.getElementsByTagName('li');

    function slideLi(myElement){

        for(var i=0;i<myElement.length;i++){
            var mc = new Hammer(myElement[i]);
            var Width=$('.rule-box').width();
            var that=$(myElement[i]);

            (function(that,mc){
                mc.on("panleft", function(ev) {
                    that.animate({'right':Width},200).siblings().animate({'right':0},200);
                });

                mc.on("panright", function(ev) {
                    that.animate({'right':0},200);
                });
            })(that,mc);


        }

    }

    slideLi(el);

    $('.rule-box').find('.clear').click(function(){
        $(this).parent().parent().remove();
    })


</script>
</body>
</html>